<template>
    <div v-show="showAlways || value.totalCount > value.page_size" style="text-align: center;">
        <Page 
            :total="value.totalCount" :current="value.current_page" :page-size="value.page_size" 
            size="small" show-elevator :show-sizer="showSizer" show-total
            @on-change="handleChange" @on-page-size-change="handlePageSizeChange"
        ></Page>
    </div>
</template>

<script lang="ts">
import Page from '@common/models/Page'

export default {
    name: "AutoPage",
    props: {
        value: {
            type: Page
        },
        auto: {
            type: Boolean,
            default: true
        },
        showSizer: {
            type: Boolean,
            default: true
        },
        showAlways: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        handleChange(current_page) {
            this.value.current_page = current_page;
            this.getData();
        },
        handlePageSizeChange(page_size) {
            this.value.page_size = page_size;
            this.value.current_page = 1;
            this.getData();
        },
        getData() {
            this.value.getData(res => {
                this.$emit("on-search", res);
            });
        }
    },
    created() {
        if(this.auto) this.getData();
    }
};
</script>